<template>
  <div>
    <page-header-wrapper></page-header-wrapper>
    <a-card style="margin-top: 20px">
      <div class="table-page-search-wrapper">
        <a-form :form="searchForm" layout="inline">
          <a-row :gutter="48">
            <SearchFormItems
              :searchKeys="SkuPriceSearchKeys"
              :getDataWithKey="getDataWithKey"
            >
            </SearchFormItems>
            <a-col :md="6" :sm="6" class="advanced_butns">
              <span
                class="table-page-search-submitButtons"
              >
                <a-button type="primary" @click="search">搜索</a-button>
                <a-button @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <div class="cont_box">
      <div class="table_header flex-between">
        <div class="table_name">{{ pageTitle }}</div>
        <div class="table_butns flex-end">
          <a-button type="primary" @click="editVisible = true">添加</a-button>
          <a-button size="default" type="link" @click="downloadExample">
              Excel模板
          </a-button>
          <a-upload class="uploadExcel" :show-upload-list="false" maxCount="1" accept="xlsx,xls" :fileList="fileList" :customRequest="customUpload">
            <a-button type="primary" icon="plus" :loading="importLoading">导入</a-button>
          </a-upload>
        </div>
      </div>
      <a-table
        :columns="SkuPriceColumn"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowKey="(it) => it.id"
        :loading="loading"
        binvested
      >
        <a-badge
          slot="status"
          slot-scope="text"
          :status="text.status == '正常' ? 'success' : 'error'"
          :text="text.status||'禁用'"
        />
        <span slot="operation" slot-scope="text, record">
          <a-button size="small" type="link" @click="showModal(record)">
            编辑
          </a-button>
          <a-button size="small" type="link" @click="statusUpdate(record)">
            删除
          </a-button>
        </span>
      </a-table>
      <pagination
        :total="total"
        :page.sync="page"
        :size.sync="size"
        :onPageSizeChange="onPageSizeChange"
      />
      <a-modal
        title="编辑价格"
        v-model="editVisible"
        destroyOnClose
        @ok="sureModal"
        width="600px"
      >
        <div class="modal_body_cont">
          <a-form
            :form="modalForm"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 16 }"
          >
            <modalFormItem
              :searchKeys="SkuPriceModalKeys"
              :getDataWithKey="getDataWithKey"
            ></modalFormItem>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { SkuPriceSearchKeys, SkuPriceColumn, SkuPriceModalKeys } from "./config";
import { skuPriceList,skuPriceDelete,skuPriceEdit,skuPriceImport,templateDownload } from "@/api/company";

export default {
  name: "CompanyList",
  data() {
    return {
      pageTitle: "",
      SkuPriceSearchKeys,
      SkuPriceColumn,
      SkuPriceModalKeys,
      dataSource: [],
      pagination: false,
      page: 1,
      size: 50,
      total: 0,
      loading: false,
      searchForm: this.$form.createForm(this, { name: "company_skupirce_search" }),
      editVisible: false,
      modalForm: this.$form.createForm(this, {
        name: "company_skuprice_modal",
      }),
      clientId:'',
      skuPriceId: "",
      importLoading:false,
      fileList:[]
    };
  },
  computed: {
    getDataWithKey() {
      return (key) => {
        switch (key) {
          default:
            return [];
        }
      };
    },
  },
  created() {
    this.clientId = this.$route.query?.clientId
    this.pageTitle = this.$route?.meta?.title;
    this.getList()
  },
  methods: {
    downloadExample(){
      templateDownload().then(res =>{
        window.open(res?.data);
      })
    },
    search() {
      this.page = 1;
      this.getList();
    },
    reset() {
      this.searchForm.resetFields();
      this.page = 1;
      this.dataSource = []
    },
    onPageSizeChange(page, size) {
      this.page = page;
      this.getList(page, size);
    },
    statusUpdate(record) {
      this.$confirm({
        title: `确定要删除吗？`,
        content: "",
        okText: `删除`,
        okType: "danger",
        cancelText: "取消",
        onOk: () => {
          skuPriceDelete(record.id).then((res) => {
            this.$message.success("操作成功");
            this.getList();
          });
        },
      });
    },
    // 获取列表
    async getList(currentPage, currentSize) {
      this.loading = true;
      const { page, size,clientId } = this;
      this.searchForm.validateFields(async (err, values) => {
        if (!err) {
          let params = {
            pageNum: currentPage || page,
            pageSize: currentSize || size,
            ...values,
            clientId
          };
          const res = await skuPriceList(params);
          if (res?.success) {
            this.total = res?.data?.total || 0;
            this.dataSource = res?.data?.list || [];
          } else {
            this.$message.error(res?.message);
          }
          this.loading = false;
        } else {
          this.loading = false;
        }
      });
    },

    customUpload(data){
      this.importLoading = true
      const formData = new FormData()
      formData.append('file', data.file)
      skuPriceImport(this.clientId,formData).then((res) => {
          if(res?.code == 200){
              this.$message.success('导入成功')
              this.getList()
          }else{
              this.$message.error(res?.message)
          }
          this.importLoading = false
      })
    },
    showModal(record) {
      this.editVisible = true;
      let { id, salesPrice } = record;
      this.skuPriceId = id;
      this.$nextTick(() => {
        this.modalForm.setFieldsValue({
          price:salesPrice
        });
      });
    },
    sureModal() {
      let { skuPriceId } = this;
      this.modalForm.validateFields(async (err, values) => {
        if (!err) {
          let params = {
            ...values,
          };
          console.log("params>>>", params);
          skuPriceEdit(skuPriceId,params).then((res) => {
            console.log("updatete", res);
            if (res?.success) {
              this.$message.success("编辑成功" );
              this.skuPriceId = "";
              this.editVisible = false;
              this.getList();
            } else {
              this.$message.error(res?.message);
            }
          });
        }
      });
    },
  },
};
</script>
<style scoped>
:deep(.ant-calendar-picker) {
  width: 100% !important;
}
</style>
